<template>
  <div class="header-info">
    <!-- <el-breadcrumb :separator-icon="ArrowRight"> -->
    <el-breadcrumb separator="/">
      <template v-for="item in breadArrs" :key="item.name">
        <el-breadcrumb-item :to="{ path: item.path }">
          {{ item.name }}
        </el-breadcrumb-item>
      </template>

      <!-- <el-breadcrumb-item>promotion management</el-breadcrumb-item>
      <el-breadcrumb-item>promotion list</el-breadcrumb-item>
      <el-breadcrumb-item>promotion detail</el-breadcrumb-item> -->
    </el-breadcrumb>
  </div>
</template>

<script setup lang="ts">
import { ArrowRight } from '@element-plus/icons-vue'
import { useRoute, useRouter } from 'vue-router'
import { mapPathToBread } from '../../../utils/map-menu'
import { localCache } from '@/utils/cache'
import component from 'element-plus/es/components/tree-select/src/tree-select-option.mjs'
import { computed } from 'vue'

const route = useRoute()
const UserMenus = localCache.getCache('userMenus')

// 通过计算属性 监听 route 如果有发生变化 就从新计算一次
const breadArrs = computed(() => {
  return mapPathToBread(route.path, UserMenus)
})
console.log(' ===========breadArrs===========')
console.log(breadArrs)
</script>

<style lang="less" scoped></style>
